/<template>
<div class="Menu">
    <!-- 菜单管理 -->
    <header>
        <van-button type="info" @click="$router.push('/Add')"> + 新增</van-button>
        <van-checkbox v-model="checked" shape="square" @change="AllInpBtn()">全选</van-checkbox>
    </header>
    <ul>
        <li>单选</li>
        <li>序号</li>
        <li>姓名</li>
        <li>账户</li>
        <li>性别</li>
        <li>备注</li>
        <li>最后时间</li>
        <li>最后更新人</li>
        <li>操作</li>
    </ul>
    <ul v-for="(item,index) in AllList" :key="index">
        <li>
            <!-- <van-checkbox shape="square" v-model="item.flag" @click="InpBtn(item.id)" /> -->
            <input type="checkbox" :checked="item.flag" @click="InpBtn(item.id)">
        </li>
        <li>{{item.id}}</li>
        <li>{{item.user}}</li>
        <li>{{item.Euser}}</li>
        <li>{{item.sex}}</li>
        <li></li>
        <li>{{item.date}}</li>
        <li></li>
        <li>
            <van-button type="primary" size="small" @click="$router.push('/Edit/'+item.id)">编辑</van-button>
            <van-button type="warning" size="small" @click="ClearBtn(item.id)">删除</van-button>
        </li>
    </ul>
    <!-- <van-dialog v-model="show" title="标题" show-cancel-button>

    </van-dialog> -->
    
</div>
</template>

<script>
import { mapState } from 'vuex'
import { Dialog } from 'vant';
import axios from 'axios';
export default {
    data(){
        return {
            show: true,
            checked:this.$store.state.AllInpCheck,
        }
    },
    computed: {
        ...mapState(['AllList'])
    },
    created() {
        // axios.get('/api/list').then(res=>{
        //     this.AllList = res.data;
        //     console.log(res.data,'---res.data');
        // })
        
    },
    mounted() {
        this.$store.dispatch('asyncList', );
    },
    methods: {
        ClearBtn(id){
            Dialog.confirm({
                // title: '标题',
                message: '确定删除此项吗？',
            }) .then(() => {
                console.log('确认');
                this.$store.commit('ClearBtn', id)
            }).catch(() => {
                console.log('取消');
            });
        },
        InpBtn(id){
            this.$store.commit('InpBtn', id)  
        },
        AllInpBtn(){
            console.log(this.checked);
            this.$store.commit('AllInpBtn', this.checked)  
        }
    },
}
</script>

<style lang="scss">
.Menu{
    width: 100%;
    height: 100%;
}
header{
    width: 100%;
    height: 50px;
    background: #eee;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
}
ul{
    width: 100%;
    height: 50px;
    display: flex;
    border-bottom: 1px solid #ccc;
    li{
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-right: 1px solid #ccc;
    }
}
</style>